<template>
	<view class="content">
		<view class="btn-container flex-c-c">
			<button class='flex-c-c' @click="pay">立即支付</button>
		</view>
		<view class="pay-container" v-if="pay_img">
			<view>请在PC浏览器端打开此网站，手机在扫码付款哦</view>
			<image :src="pay_img"></image>
		</view>

	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import QRCode from 'qrcode'
	import request from '@/utils/request.js'

	const pay_img = ref('')


	// 支付
	const pay = async () => {
		let order_id = Date.now() + '' + parseInt(Math.random() * 10000)
		let total_price = 1
		let openid = ''

		// #ifdef MP
		openid = uni.getStorageSync('openid')
		// #endif

		const payResult = await request.post('/api/wxpay', {
			order_id,
			total_price,
			openid
		})

		// console.log(payResult)
		let {
			status,
			data
		} = payResult
		if (status !== 200) {
			uni.showToast({
				title: "支付失败"
			})
			return;
		}


		// #ifdef H5
		// 弹框显示二维码-》用户扫码支付,将支付地址转换成二维码图片
		const img_url = await QRCode.toDataURL(data.code_url)
		pay_img.value = img_url
		
		uni.showToast({
			title: "h5弹出支付二维码" + data.code_url
		})
		// #endif

		// #ifdef MP
		// 将接口返回的预支付相关参数，传递给wx.requestPayment支付api,从而拉取支付
		uni.requestPayment({
			...data,
		})
		// #endif

		// TODO: 心跳检测机制，检查支付结果，调用接口


	}


</script>

<style lang="scss" scoped>
	$width: 50px;
	
	.pay-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;

		.btn-container {
			button {
				// width: 602rpx;
				// height: 88rpx;
				width: px2rpx(301);
				height: px2rpx(44);
				color: #fff;
				font-size: 40rpx;
				border-radius: 49rpx;
				background: linear-gradient(138.54deg, rgba(255, 204, 51, 1) 0%, rgba(255, 157, 23, 1) 100%);
				box-shadow: 0px 4rpx 26rpx rgba(255, 172, 32, 0.34);
			}
		}




		.box2 {
			width: 375px;
			background-color: green;
		}

		.box3 {
			width: 375rpx;
			background-color: skyblue;
		}


		.box {
			width: $width;
			height: 200px;
			/* #ifdef H5 */
			background-color: $bgc;
			/* #endif */

			/* #ifdef MP-WEIXIN */
			background-color: green;
			/* #endif */

		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>